<template>
  <div class="agree">
  <NavBar>
     <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
    <div slot="center">
      订场须知
    </div>
  </NavBar>
    <div class="notice">
    <van-notice-bar left-icon="volume-o" :scrollable="false" delay="100" speed="1000">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :show-indicators="false"
  >
    <van-swipe-item>羽毛球馆 16:00-18:00 教职工篮球占用</van-swipe-item>
    <van-swipe-item>昨日羽毛球馆小明捡到一部手机</van-swipe-item>
    <van-swipe-item>欢迎大家来到羽毛球馆运动</van-swipe-item>
  </van-swipe>
</van-notice-bar>
      </div>
<div class="info">
  <div class="text theme"><span>预定须知</span></div>
  <div class="text"><span >1、羽毛球场地开放时间(如有变化详见通告):</span>
    <div class="text center"> 周一至周五: 16：00 — 20：00</div>
    <div class="text center"> 周末及假日: 09：00 — 17：00</div></div>
<div class="text">2、个人贵重物品请不要带入网球中心，请保管好个人物品，以免丢失。</div>
<div class="text">3、出入场地，注意安全。请从场地外侧走动。避免发生碰撞受伤。</div>
  <div class="text">4、严禁将儿童带入场内，如因带入场内造成任何不良后果，由其带入者或其监护人负全部责任。</div>
    <div class="text">5、严禁在场地内及附近区域抽烟或使用明火，严禁携带易燃易爆等危险品入场及出现在场地周围。</div>
  <div class="text">6、严禁攀爬、拖拽、翻越挡网围墙；严禁私自破坏上锁通道，违者将送相关部门处理</div>

</div>
    <div class="btn">
    <van-button type="primary" :disabled="!disable" block class="info" v-show="show" @click="timebegin">须知已经阅读并同意</van-button>
          <van-button type="primary" :disabled="!disable" block class="info" v-show="!show">
            <van-count-down :time="time" format=" ss 秒" @finish="finish" class="conlr" :auto-start="false"  ref="countDown"/>
          </van-button>

      </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
export default {
name: "Badminton_agree",
  data(){
  return{
    disable:true,
    show:true,
     time: 5 * 1100,
  }
  },
  components: {NavBar},
    methods:{
  return_before(){
    history.go(-1)
  },
      finish(){
    this.$router.push('/school/badminton/border')
    this.show=true

      },
      timebegin(){
       this.$refs.countDown.start();
    this.show=false


      }
  }
}
</script>

<style scoped>
.info{
  padding: 16px;
}
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
  .notice{margin-top: 10px}

  .agree{
    /*color: black;!important;*/
    color: black!important;
  }
.text{
  margin-top: 10px;

}
.theme{
  margin-bottom: 20px;
  text-align: center;
}
.center{
  text-align: center;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
.btn{
  padding-left: 16px;
  padding-right: 16px;
}
.conlr{
  color:  #fff;
}
</style>